// src/views/home/Index.tsx
import React, { useEffect, useState } from 'react';
import { getShopsNum, getUsersNum } from '../../api/home';
import { Row, Col, Statistic, Card } from 'antd'
import { UsergroupDeleteOutlined, ShoppingOutlined } from '@ant-design/icons';

type IndexProps = {}
export const Index = (props: IndexProps) => {
    const [shopsNum, setShopsNum] = useState(0)
    const [usersNum, setUsersNum] = useState(0)
    // 在 React 的 useEffect 副作用中，不允许使用 async 回调
    useEffect(() => {
        (async () => {
            let res1 = await getShopsNum()
            let res2 = await getUsersNum()
            console.log(res1.data.data, res2.data.data);
        })();

        // Promise all 操作是把多个 Promise 对象放进一个数组，然后批量进行操作
        // 一般情况下，批量删除、批量上传 .... 等等场景下可能使用到 Promise.all
        Promise.all([getShopsNum(), getUsersNum()]).then(res => {
            console.log(res);
            setShopsNum(res[0].data.data)
            setUsersNum(res[1].data.data)
        })

    }, [])
    return (
        <>
            <Row gutter={16}>
                <Col span={6}>
                    <Card>
                        <Statistic title="商品总数量：" value={shopsNum} prefix={<ShoppingOutlined />} />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <Statistic title="用户总数量：" value={usersNum} prefix={<UsergroupDeleteOutlined />} />
                    </Card>
                </Col>
            </Row>
        </>
    );
}